  <template>
  <div>
    <el-table :data="data" stripe style="width: 100%">
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="username" label="客户姓名" />
      <el-table-column prop="sex" label="客户性别" />
      <el-table-column prop="age" label="客户年龄" />
      <el-table-column prop="callNumber" label="客户电话" />
      <el-table-column prop="agree" label="学历" />
      <el-table-column prop="heigh" label="身高" />
      <el-table-column prop="weigh" label="体重" />
      <el-table-column prop="headImg" label="头像">
        <template v-slot:default="scope">
          <img :src="scope.row.headImg" alt="头像" width="50" height="50" />
        </template>
      </el-table-column>
      <el-table-column prop="img" label="个人照片">
        <template v-slot:default="scope">
          <img :src="scope.row.img" alt="个人照片" width="50" height="50" />
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="clickHandler(scope.row.id)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="100"
      :current-page="page"
      @current-change="changePage"
    />
  </div>
</template>
<script setup lang="ts">
//引入数据类型
import type { UserListType } from "@/typings/customerType";

//定义一个公共的类型接口
interface IProps {
  data: UserListType[];
  total: number;
  loadData: (page: number) => void;
  page: number;
}

//定义传值数据
const props = defineProps<IProps>();

//定义页码改变数据
const changePage = (page: number) => {
  props.loadData(page);
};

//子父传值数据定义
const emits = defineEmits(["pass-value"]);

//点击事件
const clickHandler = (id: number) => {
  emits("pass-value", id); // 触发自定义事件并传递值
};

</script>

<style lang="scss" scoped></style>
    